<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="jeessy2" />
    <title>DDNS-GO</title>
    <link
      class="theme"
      rel="stylesheet"
      type="text/css"
      href="./static/common.css"
    />
    <link rel="stylesheet" href="./static/bootstrap.min.css" />
    <link rel="stylesheet" href="./static/theme-button.css" />
    <script src="./static/constant.js"></script>
    <script src="./static/utils.js"></script>
    <script src="./static/i18n.js"></script>
  </head>

  <body>
    <header>
      <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="button-container container d-flex justify-content-between">
          <a
            target="blank"
            href="https://github.com/jeessy2/ddns-go"
            class="navbar-brand d-flex align-items-center"
          >
            <strong>DDNS-GO</strong>
          </a>
          <span class="theme-button gg-dark-mode" id="themeButton"></span>
        </div>
      </div>
    </header>

    <main role="main">
      <div class="row" style="margin-top: 10%">
        <div class="col-md-4 offset-md-4 align-self-center">
          <form id="login">
            <div class="portlet">
              <h5 data-i18n="Login" class="portlet__head">Login</h5>
              <div
                class="portlet__body"
                style="justify-content: center; align-items: center"
              >
                <div class="form-group row">
                  <label
                    for="Username"
                    data-i18n="Username"
                    class="col-sm-2 col-form-label"
                    >Username</label
                  >
                  <div class="col-sm-10">
                    <input
                      class="form-control form"
                      name="Username"
                      id="Username"
                      autofocus
                    />
                  </div>
                </div>

                <div class="form-group row">
                  <label
                    for="Password"
                    data-i18n="Password"
                    class="col-sm-2 col-form-label"
                    >Password</label
                  >
                  <div class="col-sm-10">
                    <input
                      class="form-control form"
                      type="password"
                      name="Password"
                      id="Password"
                    />
                  </div>
                </div>

                <div class="form-group row">
                  <div class="col-sm-10 offset-sm-2">
                    <button data-i18n="{{- if .EmptyUser -}}LoginInit{{else}}Login{{- end -}}" class="btn btn-primary login_btn">
                      Login
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </main>
  </body>

  <script src="./static/theme.js"></script>
  <script>
    // 登录
    document.querySelectorAll(".login_btn").forEach(($el) => {
      $el.addEventListener("click", async (e) => {
        e.preventDefault();
        try {
          const resp = await request.post("./loginFunc", {
            Username: document.getElementById("Username").value,
            Password: document.getElementById("Password").value,
          });

          if (resp.Code !== 200) {
            showMessage({
              content: resp.Msg,
              type: "error",
              duration: 5000,
            });
          } else {
            window.location.href = "./";
          }
        } catch (err) {
          showMessage({
            content: err.toString(),
            type: "error",
            duration: 5000,
          });
        }
      });
    });
  </script>
</html>
